
$(document).ready(function() {
    
    synectic.showAdminInterface = true;
    synectic.stopanalyse = false;
    synectic.realTimeCharMap = false;
    
    if(synectic.showAdminInterface){
        initCharHeatMap();
        initKeyStrokeHeatMap();
        showAllHeatMaps();
        initHMKeyPressedControl();
    }

//    $(window).resize(function() {
//            if(showAdminInterface){
//                Overlay(document.getElementById("HeatmapKeyStrokeDistribution"));
//                Overlay(document.getElementById("HeatmapCharDistribution"));
//            }
//    });
    
});

//Anzeige der MouseClicked Heatmap
function showHeatPointClickListForObject(xObj){

    var currentPoint = 0;
    var pStay;
    pStay = true;
    pTimeStart = new Date().getTime();
    pTimeCurrent = new Date().getTime();
    var ready = 0;

    var heatAreas = document.getElementsByClassName('heatmapAreaClick');
    
    xObj.heatmap.clear();
      
    for(var currentPoint = 0 ; currentPoint <= xObj.HeatPointListMouseClick.length-1;currentPoint++){
        addHeatMapPoint(xObj,currentPoint);
    }
}

function addHeatMapPoint(xObj,currentPoint){

    xObj.heatmap.store.addDataPoint(parseInt(xObj.HeatPointListMouseClick[currentPoint].X),
                                    parseInt(xObj.HeatPointListMouseClick[currentPoint].Y));
}

$.fn.redraw = function(){
  $(this).each(function(){
    var redraw = this.offsetHeight;
  });
};

function showHeatMap(){
   var heatAreas = document.getElementsByClassName('heatmapAreaClick');

    for(var i = 0, l = heatAreas.length; i < l; i++) {

        heatAreas[i].heatmap.toggleDisplay();
        showHeatPointListForObject(heatAreas[i]);
        Overlay(heatAreas[i]);
      
    }
}
//----------------------------------------------------------------------------------------------
//-----------------------------------------KEYPRESSED-------------------------------------------
//----------------------------------------------------------------------------------------------
function showAllHeatMaps(){
    var hmDivSyn = document.getElementById("HeatmapKeyStrokeDistribution");
    var hmDicChar =  document.getElementById("HeatmapCharDistribution");
    showKeyStorkeHeatMap(hmDivSyn);
    showKeyStorkeHeatMap(hmDicChar);
    Overlay(hmDivSyn);
    Overlay(hmDicChar);
}
function showHeatMaps(xHeatMap){
    showKeyStorkeHeatMap(xHeatMap);
    Overlay(xHeatMap);
}
function showKeyStorkeHeatMap(xObj){
    
    if(xObj.isVisible) {
        xObj.style.display = "none";
        xObj.heatmap.toggleDisplay();
        Overlay(xObj);
    }
    else{
        xObj.style.display = "block";
        xObj.heatmap.toggleDisplay();
        
       } 
   xObj.isVisible = !xObj.isVisible;
} 
function showHeatmapKeyPressed(heatmapPressed){
    var hmDiv = document.getElementById("HeatmapKeyStrokeDistribution");
          showKeyHitPointArrayOnHeatmap(heatmapPressed.HeatPointKeyStrokeList,hmDiv.heatmap);
}
function showKeyHitPointArrayOnHeatmap(xArray,xheatmap){
    for(var i=0; i < xArray.length;i++)
            if(xArray[i].Count >0)
                xheatmap.store.addDataPoint(xArray[i].X,xArray[i].Y,xArray[i].Count);
}
function initKeyStrokeHeatMap(){
    
    var hmDiv = document.createElement("div");
    hmDiv.setAttribute("id", "HeatmapKeyStrokeDistribution");
    hmDiv.isVisible = true;
    $(hmDiv).addClass("heatMapKeyBoard");
    document.body.appendChild(hmDiv);
    var img = document.createElement("img");

    img.setAttribute("src", "src/images/keyboard.png");
    img.setAttribute("height", "100%");
    img.setAttribute("width", "100%");
    img.setAttribute("top", "0px");
    img.setAttribute("left", "0px");
    img.setAttribute("alt", "Flower");

    hmDiv.appendChild(img);
    var xx = h337.create({"element":hmDiv, "radius":26, "visible":true});
    hmDiv.heatmap= xx;
    hmDiv.heatmap.set("opacity","75");
    hmDiv.heatmap.AppendedToElement = hmDiv;
    Overlay(hmDiv);
}
function initCharHeatMap(){
   
    var hmDivChar = document.createElement("div");
    hmDivChar.setAttribute("id", "HeatmapCharDistribution");
    document.body.appendChild(hmDivChar);
    var p = $("#HeatmapCharDistribution");
    p.addClass("heatMapKeyBoard");
    
    hmDivChar.isVisible = true;
    var img = document.createElement("img");
    img.setAttribute("src", "src/images/keyboard.png");
    img.setAttribute("height", "100%");
    img.setAttribute("width", "100%");
    img.setAttribute("top", "0px");
    img.setAttribute("left", "0px");
    img.setAttribute("alt", "Flower");
    hmDivChar.appendChild(img);
    var xxChar = h337.create({"element":hmDivChar, "radius":26, "visible":true});
    hmDivChar.heatmap= xxChar;
    hmDivChar.heatmap.set("opacity","75");
    hmDivChar.heatmap.AppendedToElement = hmDivChar;
    Overlay(hmDivChar);
}
function showCharHeatmap(HeatMapContainer){
    
    var hmDiv = document.getElementById("HeatmapCharDistribution");
    if(synectic.realTimeCharMap) HeatMapContainer.updateCharList();
    showKeyHitPointArrayOnHeatmap(HeatMapContainer.HeatPointCharList,hmDiv.heatmap);
}

//----------------------------------------------------------------------------------------------
//----------------------------------------COMMON------------------------------------------------
//----------------------------------------------------------------------------------------------
function Overlay(xObj){
    var canvas;
    var parent;
    var position;
    canvas = $(xObj.heatmap.get("canvas"));
    parent = canvas.parent();
   
     if(canvas.parent().prop("tagName") != "body"){
           document.getElementById('body').appendChild(xObj.heatmap.get("canvas"));
     }
    
    parent = $(xObj.heatmap.AppendedToElement);
    position = parent.offset();
    canvas.offset(position);
    canvas.css("width",parent.outerWidth( true ));
    canvas.css("height",parent.outerHeight( true ));    
}

//----------------------------------------------------------------------------------------------
//----------------------------------------ADMININTERFACE----------------------------------------
//----------------------------------------------------------------------------------------------

function initHMKeyPressedControl(){
    var coreControl         = $(document.createElement("div"));
    var keyStrokeList       = $(document.createElement("ul"));
    var CharList            = $(document.createElement("ul"));
    var charItemList        = document.getElementsByClassName("heatmapAreaChar");
    var pressedItemList     = document.getElementsByClassName("heatmapAreaKeyStroke");

    coreControl.addClass("coreControl");
   
    CharList.addClass("coreControlItemList");
    CharList.attr("id", "coreControlCharDistrList");
    //CharList.CharHeatContainer = [];
    CharList.data("CharHeatContainer",new Array());

    keyStrokeList.addClass("coreControlItemList");
    keyStrokeList.attr("id", "coreControlKeyStrokeDistrList");
    keyStrokeList.CharHeatContainer = [];
    //keyStrokeList.data("CharHeatContainer",new Array());
   

    CharList.drawAllCheckedHeatMaps = function(){
        
        document.getElementById("HeatmapCharDistribution").heatmap.clear();
        document.getElementById("HeatmapCharDistribution").heatmap.store.max = 0;
        
        //var $this = $(this);
        var CharHeatContainer = this.data("CharHeatContainer");

        for(var i = 0; i< CharHeatContainer.length; i++){
            if(CharHeatContainer[i].Input.checked)
                   showCharHeatmap(CharHeatContainer[i].HeatMapContainer);
        }
    };
    
    keyStrokeList.drawAllCheckedHeatMaps = function(){
        
        document.getElementById("HeatmapKeyStrokeDistribution").heatmap.clear();
        document.getElementById("HeatmapKeyStrokeDistribution").heatmap.store.max = 0;
         //var $this = $(this);
         var CharHeatContainer = this.data("CharHeatContainer");
        for(var i = 0; i< CharHeatContainer.length; i++){
            if(CharHeatContainer[i].Input.checked)
                   showHeatmapKeyPressed(CharHeatContainer[i].HeatMapContainer);
        }
    };
    for(var charListCounter = 0 ;charListCounter  < charItemList.length; charListCounter++){
        var tempLI      = $(document.createElement("li"));
        var tempPara    = $(document.createElement("p"));
        var input       =document.createElement('INPUT');
        var btn         = document.createElement('BUTTON');
        var wrapper     = $(document.createElement("DIV"));

        wrapper.addClass("coreControlWrapper");
        tempLI.addClass("coreControlListItem");
        tempLI.Input= input;
        input.LiParent = tempLI;
        tempLI.HeatMapContainer = charItemList[charListCounter];

        CharList.data("CharHeatContainer").push(tempLI);

        $(btn).addClass("coreControlButton");
        $(btn).text("show");
        btn.onclick = function(){
            showHeatMaps(document.getElementById("HeatmapCharDistribution"));
            Overlay(document.getElementById("HeatmapKeyStrokeDistribution"));
        };
        
        input.onclick = function(){
            if (this.checked){
                showCharHeatmap(this.LiParent.HeatMapContainer);
            }else{
                CharList.drawAllCheckedHeatMaps();
            };
        };

        tempPara.css("display", "inline");
        tempPara.text(charItemList[charListCounter].id);
        input.setAttribute("type", "checkbox");

        tempLI.append(input);
        tempLI.append(tempPara);

        CharList.append(tempLI);

    }
    wrapper.append(btn);
    wrapper.append(CharList);
    coreControl.append(wrapper);
    
    

    for(var charListCounter = 0 ;charListCounter  < pressedItemList.length; charListCounter++){
        var tempLI      = $(document.createElement("li"));
        var tempPara    = $(document.createElement("p"));
        var input       =document.createElement('INPUT');
        var btn         = document.createElement('BUTTON');
        var wrapper     = $(document.createElement("DIV"));
        wrapper.addClass("coreControlWrapper");
        tempLI.addClass("coreControlListItem");
        tempLI.Input= input;
        input.LiParent = tempLI;
        tempLI.HeatMapContainer = pressedItemList[charListCounter];

        keyStrokeList.data("CharHeatContainer").push(tempLI);

        $(btn).addClass("coreControlButton");
        $(btn).text("show");
        btn.onclick = function(){
            showHeatMaps(document.getElementById("HeatmapKeyStrokeDistribution"));
            Overlay(document.getElementById("HeatmapCharDistribution"));
        };
        
        input.onclick = function(){
            if (this.checked){
                showHeatmapKeyPressed(this.LiParent.HeatMapContainer);
            }else{
                keyStrokeList.drawAllCheckedHeatMaps();
            };
        };

        tempPara.css("display", "inline");
        tempPara.text(pressedItemList[charListCounter].id);
        input.setAttribute("type", "checkbox");

        tempLI.append(input);
        tempLI.append(tempPara);

        keyStrokeList.append(tempLI);

    }
    wrapper.append(btn);
    wrapper.append(keyStrokeList);

    coreControl.append(wrapper);
    $(document.body).prepend(coreControl);
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    var reader = new FileReader();
    for (var i = 0, f; f = files[i]; i++) {
    
        reader.onload = function(e) {
            // Print the contents of the file
            var text = e.target.result;

            var lines = text.split(/[\r\n]+/g); // tolerate both Windows and Unix linebreaks

            for(var i = 0; i < lines.length; i++) {
                loadDataIntoElement(lines[i]);
            }
        };
        reader.readAsText(f,"UTF-8");
    }
}
function loadDataIntoElement(xLine){

  var pContent = xLine.split(";");
  var pItem = document.getElementById(pContent[0]);
  var pKeyStroke;

  if(pContent[1] == "hmChar"){
    for(var i = 2; i < pContent.length;i++){
      pKeyStroke = pContent[i].split(":");
      var result = pItem.HeatPointCharList.filter(function( obj ) {
        return obj.keyCode == pKeyStroke[0];
      });
      if(result.length > 0) 
        result[0].setCount(parseInt(pKeyStroke[1]));
    }
    var CharList = $(document.getElementById("coreControlCharDistrList"));

    console.log(CharList.data("BLA"));

    CharList.drawAllCheckedHeatMaps();
  }
  if(pContent[1] == "hmKeyStroke" ){
    pItem.HeatPointKeyStrokeList.clearList()
    for(var i = 2; i < pContent.length;i++){
      pKeyStroke = pContent[i].split(":");
      var result = pItem.HeatPointKeyStrokeList.filter(function( obj ) {
        return obj.keyCode == pKeyStroke[0];
      });
      if(result.length > 0) 
        result[0].setCount(parseInt(pKeyStroke[1]));
    }

    var keyStrokeList =  $(document.getElementById("coreControlKeyStrokeDistrList"));
    keyStrokeList.drawAllCheckedHeatMaps();
  }
  if(pContent[1] == "hmClick" ){
    
  }
  if(pContent[1] == "Move" ){
  }
}


 